<style lang="less">
.vertical-center-modal {
  .ivu-modal {
    margin-top: 10%;
  }
}
</style>
<template>
  <div>
    <Card style="margin-bottom: 10px">
      <Form inline class="form-search">
        <FormItem>
          <Input v-model="keyword" placeholder="名称/手机号" style="width: 200px" />
        </FormItem>

        <FormItem>
          <Button type="primary" @click="
  page = 1;
SearchCustomer();
          " icon="md-search">查询</Button>
        </FormItem>
        <FormItem>

          <Button type="primary" @click="AddData" icon="md-add">新增</Button>
        </FormItem>
      </Form>
    </Card>
    <Table ref="table" style="margin-bottom: 10px" border show-summary :summary-method="handleSummary"
      :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
    <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]"
      @on-change="
        (s) => {
          page = s;
          SearchCustomer();
        }
      " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchCustomer();
  }
" show-total show-sizer />
    <Modal :width="600" :footer-hide="true" v-model="modalData" :title="tempDataId > 0 ? '修改' : '新增'"
      :mask-closable="false" draggable sticky>
      <customeredit :Id="tempDataId" v-if="modalData" @on-success="onSuccess"></customeredit>
    </Modal>
    <Modal :footer-hide="true" :width="1000" draggable v-model="modalLog" title="账目明细" :mask-closable="false" sticky>
      <customerpaylog :Id="tempDataId" v-if="modalLog" />
    </Modal>
    <Modal :footer-hide="true" :width="600" draggable v-model="modalPay" title="向客户收款" :mask-closable="false" sticky>
      <Customerpay :Id="tempDataId" v-if="modalPay" @on-success="onSuccess"></Customerpay>
    </Modal>
  </div>
</template>

<script>

import { SearchCustomer, DeleteCustomer } from '@/api/customer'

import customerpaylog from './customerpaylog.vue'
import customeredit from './customeredit.vue'
import Customerpay from './customerpay.vue'
export default {
  name: 'customer',
  data () {
    return {
      Extras: {},
      total: 0,
      page: 1,
      size: 50,
      modalData: false,
      modalLog: false,
      modalPay: false,
      tableHeight: 450,
      keyword: '',
      ruleValidate: {
        Amount: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]

      },
      loading: false,
      loadingTable: false,
      tempData: {},
      tableTitle: [
        {
          key: 'index',
          type: 'index',
          title: '序号',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 180,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.tempDataId = params.row.Id
                        this.modalPay = true
                      }
                    }
                  },
                  '收款'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.tempDataId = params.row.Id
                        this.modalData = true
                      }
                    }
                  },
                  '修改'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.DeleteCustomer(params.row.Id)
                      }
                    }
                  },
                  '删除'
                )
              ]

            )
          }
        },
        {
          key: 'Name',
          title: '客户名称',
          width: 200,
          align: 'center'

        },
        {
          key: 'Phone',
          title: '手机号',
          width: 200,
          align: 'center'

        },
        {
          key: 'Balance',
          title: '账目(元)',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h(
              'a',
              {
                style: {
                  color: params.row.Balance >= 0 ? '#19be6b' : '#ed4014',
                  fontSize: '18px',
                  textDecoration: 'underline'
                },
                on: {
                  click: () => {
                    this.tempDataId = params.row.Id
                    this.modalLog = true
                  }
                }
              },
              params.row.Balance
            )
          }
        },
        {
          key: 'Address',
          title: '地址',
          minWidth: 200,
          align: 'center'

        }, {
          key: 'Remark',
          title: '备注',
          minWidth: 200,
          align: 'center'
        }

      ],
      tableData: [],

      tempDataId: null
    }
  },
  components: {
    customerpaylog,
    customeredit,
    Customerpay
  },
  computed: {},

  methods: {
    onSuccess (res) {
      this.modalData = false
      this.modalLog = false
      this.modalPay = false
      if (res == 1) {
        this.SearchCustomer()
      }
    },
    handleSummary ({ columns, data }) {
      let vm = this

      const sums = {}
      columns.forEach((column, index) => {
        const key = column.key
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          }
        } else if (key == 'Balance') {
          sums[key] = {
            key,
            value: Number(vm.Extras.Balance.toFixed(2))
          }
        } else {
          sums[key] = {
            key,
            value: ' '
          }
        }
      })

      return sums
    },

    SearchCustomer () {
      let vm = this
      vm.loadingTable = true
      var reqData = {
        page: vm.page,
        size: vm.size,
        keyword: vm.keyword
      }
      SearchCustomer(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
          vm.Extras = data.Extras
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    DeleteCustomer (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteCustomer(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchCustomer()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },
    AddCustomerPay () {
      let vm = this
      vm.$refs['formValidate'].validate((valid) => {
        if (valid) {
          vm.loading = true
          AddCustomerPay(vm.tempData).then((res) => {
            vm.loading = false
            const data = res.data
            if (data.StatusCode == 200) {
              vm.modalData = false
              vm.$Message.success({ title: '提示', content: '收款成功' })
              vm.SearchCustomer()
            } else {
              vm.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        }
      })
    },
    AddData () {
      this.tempDataId = 0
      this.modalData = true
    }

  },
  mounted () {
    this.tableHeight = window.innerHeight - 320
    this.SearchCustomer()
  }
}
</script>

<style>
</style>
